
<#assign basePath="/blog" >
<#assign staticPath="/static" >

<#macro script_import>
</#macro>
<#macro script>
</#macro>
<#macro css_import>
</#macro>
<#macro css>
</#macro>

<#macro layout>
<!DOCTYPE html>
<html>
<head>
    <title> 欢迎使用 BLOGSOHO </title>

<#--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">-->
    <!-- set the encoding of your site -->
    <meta charset="utf-8">
    <!-- set the viewport width and initial-scale on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <!-- include the site stylesheet -->
    <link href='https://fonts.googleapis.com/css?family=Merriweather:300,400,700%7CPoppins:400,300,500,600,700'
          rel='stylesheet' type='text/css'>
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/font-awesome.min.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/bootstrap.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/slick.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/animate.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/style.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/responsive.css">
    <!-- include the site stylesheet -->
    <link rel="stylesheet" href="${staticPath}/css/colors.css">
    <@css_import />
    <#if css ??>
  	    <@css />
    </#if>
</head>
<body>

<div class="loader-holder">
    <div class="loader">
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
        <div class="side"></div>
    </div>
</div>
<!-- main container of all the page elements -->
<div id="wrapper">
    <!-- header of the page -->
    <header id="header" class="version-i">
        <div class="stick-holder">
            <div class="container">
                <div class="row">
                    <div class="col-xs-3 col-sm-2">
                        <!-- logo of the page -->
                        <div class="logo"><a href="/blog"><img src="${staticPath}/images/logo.png" alt="dot"></a></div>
                        <!-- logo of the page end -->
                    </div>
                    <div class="col-xs-9 col-sm-10 nav-holder">
                        <!-- Nav of the page -->
                        <nav id="nav" class="navbar navbar-default">
                            <!-- Navbar header of the page -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <!-- Navbar header of the page end -->
                            <!-- Collapse navbar collapse of the page -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="${basePath}">Home</a></li>
                                    <li><a href="${basePath}/archive">Archive</a></li>
                                    <li><a href="${basePath}/contact">Contact</a></li>
                                </ul>
                            </div>
                            <!-- Collapse navbar collapse of the page end -->
                        </nav>
                        <!-- Nav of the page end -->
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- header of the page end -->
    <#nested>

    <!-- aside of the page -->
    <aside class="aside footer-area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 holder">
                    <div class="col">
                        <!-- logo of the page -->
                        <div class="logo">
                            <a href="#">
                                <img src="/static/images/logo2.png" alt="dot">
                            </a>
                        </div>
                        <!-- logo of the page end -->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
                            ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p>
                        <!-- Social Network of the page -->
                        <ul class="social-networks">
                            <li><a href="#"><span class="ico-facebook"></span></a></li>
                            <li><a href="#"><span class="ico-twitter"></span></a></li>
                            <li><a href="#"><span class="ico-google-plus"></span></a></li>
                            <li><a href="#"><span class="ico-linkedin"></span></a></li>
                            <li><a href="#"><span class="ico-pinterest"></span></a></li>
                        </ul>
                        <!-- Social Network of the page -->
                    </div>
                    <!-- footer nav of the page -->
                    <nav class="col footer-nav">
                        <h3>Important Links</h3>
                        <ul>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Terms &amp; Conditions</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Sitemap</a></li>
                            <li><a href="#">Support</a></li>
                        </ul>
                    </nav>
                    <!-- footer nav of the page end -->
                    <!-- Widget holder of the page -->
                    <div class="col widget-holder">
                        <h3>Popular Posts</h3>
                        <div class="widget recent-posts-widget">
                            <ol>
                                <li>
                                    <h4><a href="${basePath}/single">I get up in the morning looking <br>for an adventure.</a></h4>
										<span class="post-tag">
											<time datetime="2011-01-12"><a href="#">21st Jan</a></time>
										</span>
                                </li>
                                <li>
                                    <h4><a href="${basePath}/single">I get up in the morning looking <br>for an adventure.</a></h4>
										<span class="post-tag">
											<time datetime="2011-01-12"><a href="#">21st Jan</a></time>
										</span>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <!-- Widget holder of the page end -->
                    <div class="col">
                        <h3>Subscribe to Newsletter</h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.</p>
                        <!-- subscribe form of the page -->
                        <form action="#" class="subscribe-form">
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Enter your email here">
                                <button type="button" class="ico-send"></button>
                            </div>
                        </form>
                        <!-- subscribe form of the page end -->
                    </div>
                </div>
            </div>
        </div>
    </aside>
    <!-- aside of the page end -->
    <!-- footer of the page -->
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="">自由</a></p>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer of the page end -->
    <!-- Back Top of the page -->
    <span id="back-top" class="fa fa-angle-up"></span>
    <!-- Style Changer of the page -->
    <div id="style-changer" data-src="${staticPath}/inc/style-changer.html"></div>
</div>

    <@script_import />
<!-- include jQuery -->
<script src="${staticPath}/js/jquery.js"></script>
<!-- include jQuery -->
<script src="${staticPath}/js/plugins.js"></script>
<!-- include jQuery -->
<script src="${staticPath}/js/jquery.main.js"></script>
<script type="text/javascript">
<@script />
</script>
</body>
</html>
</#macro>

<#macro category_temp >

<!-- Widget of the page -->
<div class="widget widget_categories tabs wow fadeInUp" data-wow-delay="0.6s">

    <header class="widget-head">
        <h3>Category</h3>
        <p>browse all your favourite categories</p>
    </header>
    <div class="lists-holder">
        <ul>
            <#list category as item>
                <#if item?is_odd_item>
                    <li class="cat-item cat-item-1"><a href="/blog/archive/${item.id}">${item.title} </a> (${item.total})</li>
                </#if>
            </#list>
        </ul>
        <ul>
            <#list category as item>
                <#if item?is_even_item>
                    <li class="cat-item cat-item-1"><a href="/blog/archive/${item.id}">${item.title} </a> (${item.total})</li>
                </#if>
            </#list>
        </ul>
    </div>
</div>
<!-- Widget of the page end -->
</#macro>

<#macro personal_temp>
<!-- Widget of the page -->
<section class="widget profile-widget version-ii hidden-sm hidden-xs wow fadeInUp"
         data-wow-delay="0.4s">
    <div class="profile-pic">
        <a href="#">
            <img src="/static/images/img11.jpg" alt="John Aston">
        </a>
    </div>
    <h3><a href="#"><img src="/static/images/text-jhon-aston.png" alt="jhon aston"></a></h3>
    <p>Hi, I am Galen K. Duis autem vel eum dolor in hendrerit in vulputate velit esse mole
        consequat, vel illum dolore eu feugiat nulla lisis at vero eros et accumsan et iusto.</p>

    <ul class="social-networks">
        <li><a href="#"><span class="icon ico-facebook"></span></a></li>
        <li><a href="#"><span class="icon ico-twitter"></span></a></li>
        <li><a href="#"><span class="icon ico-google-plus"></span></a></li>
        <li><a href="#"><span class="icon ico-linkedin"></span></a></li>
        <li><a href="#"><span class="icon ico-pinterest"></span></a></li>
    </ul>

</section>
<!-- Widget of the page end -->
</#macro>